<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .one{
            width: 200px;
            height: 200px;

            /*线性渐变  background 中的linear-gradient属性值 (to 方向,颜色1,颜色2) */
            /*background: linear-gradient(to bottom,red, blue);*/
            /*background: linear-gradient(to top,red, blue);*/
            /*background: linear-gradient(to left,red, blue);*/
            /*background: linear-gradient(to right,red, blue);*/

            /*background-image 中的 linear-gradient 属性值 也行*/
            /*[从左上]到右下*/
            /*background-image: linear-gradient(to right bottom,red,blue);*/
            /*background-image: linear-gradient(120deg,red,blue);*/
            background-image: linear-gradient(red 15%,green 20%,blue 30%);
        }



        .two{
            margin-top: 50px;
            width: 200px;
            height: 200px;
            border: 1px solid #000;

            /*径向渐变  ellipse（椭圆的意思，默认值）*/
            /*（形状 距离 at 位置,颜色1,颜色2）*/
            /*background-image: radial-gradient(ellipse farthest-side,red,orange,blue);*/
            /*background-image: radial-gradient(circle closest-corner at top,red,blue);*/
            /*background-image: radial-gradient(circle closest-corner at left,red,blue);*/
            /*background-image: radial-gradient(circle closest-corner at right,red,blue);*/

            /*这里的at 50% 50% 效果是居中*/
            /*background-image: radial-gradient(circle closest-corner at 50% 50%,red,blue);*/

            /*设置颜色重复 repeating-radial-gradient(形状 at 大小,颜色1 占比,颜色2 占比,颜色3 占比,……) */
            background-image: repeating-radial-gradient(circle at 50% 50%,red 10%,green 20%,blue 30%);

        }

    </style>

</head>
<body>


<div class="one">线性渐变</div>
<div class="two">径向渐变</div>

</body>
</html>